<template>
  <div>
    <!-- 一条文章单元格@click="cellClickFN" -->
    <van-cell >
        <!-- 标题区域的插槽 -->
        <template #title>
          <div class="title-box">
            <!-- 标题 -->
            <span>{{ objItem.title }}</span>
            <!-- 单图 -->
            <!-- 整个图片组件可以解决404问题，默认给他个占位图 -->
              <img v-lazy="objItem.cover.images[0]" v-if="objItem.cover.type === 1 "
              class="thumb"
              >
              <!-- :src="objItem.cover.images[0]" -->
                <!-- <template v-slot:error>图片走丢了</template> -->
            <!-- <img v-if="objItem.cover.type === 1 " class="thumb"  :src="objItem.cover.images"> -->
          </div>

            <!-- 三张图 -->
              <div class="thumb-box" v-if="objItem.cover.type > 1 ">
                <img v-for="(item, index) in objItem.cover.images"
                  :key="index"
                  class="thumb"

                  v-lazy="item"
                  >

                  <!-- :src="item" -->
                    <!-- <template v-slot:error>图片走丢了</template> -->

                <!-- <img
                  v-for="(item, index) in objItem.cover.images"
                  :key="index"
                  class="thumb"
                  :src="item"> -->
              </div>
        </template>
        <!-- label 区域的插槽 -->
        <template #label>
          <div class="label-box">
            <div>
              <span>{{ objItem.aut_name }}</span>
              <span>{{ objItem.comm_count }}评论</span>
              <span>{{formatTime(objItem.pubdate) }}</span>
            </div>
            <!-- 反馈按钮x -->
            <!-- 事件冒泡, -->
            <van-icon name="cross"  @click.stop="show = true" v-if="isShow"/>
          </div>
        </template>
      </van-cell>
      <!-- 反馈面板 -->
      <van-action-sheet v-model="show" :actions="actions"
       @select="onSelect" get-container="body"
       :cancel-text="cancelText"
       @cancel="cancelFn"
       @close="closeFn"
       />
       <!-- cancel取消事件 -->
       <!-- close关闭事件将actions的值回到第一次 -->
  </div>

</template>

<script>
import { firstActions, secondActions } from '@/api/report.js'

// 点击反馈垃圾内容实现数据切换
// 监听点击事件，区分点击的是哪个
import { timeAgo } from '@/utils/date.js'
export default {
  props: {
    objItem: {
      type: Object,
      default() {
        return {}
      }
    },
    isShow: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      show: false, // 反馈面板显示或者隐藏
      actions: firstActions,
      cancelText: '取消' // 底部文字
    }
  },
  methods: {
    formatTime: timeAgo, // 函数体就是timtAgo
    onSelect(action, item) {
      // action是绑定的对象，item是索引值
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起
      // 反馈面板--this.show = false
      if (action.name === '反馈垃圾内容') {
        this.actions = secondActions
        this.cancelText = '返回'
      } else if (action.name === '不感兴趣') {
        this.$emit('dislikeEV', this.objItem.art_id)
        // 反馈后隐藏面板
        this.show = false
      } else { // 二级反馈页面
        this.$emit('reportEV', this.objItem.art_id, action.value)
        this.actions = firstActions
        this.show = false // 关闭面板
      }
    },
    // 反馈面板--点击取消按钮时触发
    cancelFn() {
      if (this.cancelText === '返回') {
        this.show = true
        this.actions = firstActions
        this.cancelText = '取消'
      }
    },
    // 反馈面板--点击遮罩层关闭二级面板返回到一级面板
    closeFn() {
      this.actions = firstActions
      this.cancelText = '取消'
    }

    // // 文章单元格点击事件
    // cellClickFN() {
    //   this.$router.push('/article_detail')
    // }
  }
}
</script>

<style scoped lang="less">
/* 标题样式 */
.title-box {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

/* label描述样式 */
.label-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 文章信息span */
.label-box span{
    margin: 0 3px;
    &:first-child{
        margin-left: 0;
    }
}
/* 图片的样式, 矩形黄金比例：0.618 */
   .thumb {
     width: 113px;
     height: 70px;
     background-color: #f8f8f8;
     object-fit: cover;
   }

   /* 三图, 图片容器 */
   .thumb-box {
     display: flex;
     justify-content: space-between;
   }
</style>
